<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input {
            position: relative;
            z-index: 1;
        }
    </style>
</head>
<body>
    <span style="position:absolute;bottom:30px;"></span>
    <input type="button" value="+" id="add">
    <input type="button" value="-" id="diff">
    <input type="color" id="color">
</body>
<script>

    var span = document.querySelector("span");
    var oadd = document.getElementById("add");
    var odiff = document.getElementById("diff");
    var ocolor = document.getElementById("color");

    var w = 10;
    var h = 10;
    var c = "#000";

    document.onmousemove = function (eve) {
        // var e = eve ? eve : window.event;
        var e = eve || window.event;
        // 实时显示鼠标坐标
        span.innerHTML = e.pageX + ", " + e.pageY;

        // 创建元素
        var div = document.createElement("div");
        // 设置元素基础样式
        div.style.position = "absolute";
        div.style.left = e.pageX - w / 2 + "px";
        div.style.top = e.pageY - h / 2 + "px";
        div.style.width = w + "px";
        div.style.height = h + "px";
        div.style.background = c;
        div.style.borderRadius = "50%";
        div.style.border = "2px #ffffff solid"

        // 不推荐使用的设置css的方式
        // div.style.cssText = "position:absolute;left:"+ e.pageX +"px;top:"+ e.pageY +"px;width:"+ w +"px;height:"+ h +"px;border-radius:50%;background:"+ c +";";

        // 插入页面
        document.body.appendChild(div);
    }

    oadd.onclick = function () {
        // 点击+号，增加宽高
        w += 5;
        h += 5;

    }

    odiff.onclick = function () {
        // 点击-号，减小宽高
        // 注意最小值
        if (w <= 5) {
            w = h = 5;
        } else {
            w -= 5;
            h -= 5;
        }

    }

    // 注意事件
    ocolor.onchange = function () {
        // 改颜色
        c = this.value;
    }
</script>
</html>